import { Tooltip } from 'antd'
import './style/listItem.less'

const ListComponent = ({ item, clickCallBack = () => {}, delCallBack = (id: number | string) => {} }) => {
  return (
    <div
      key={item.id}
      onClick={() => {
        console.log('clickCallBack')
        clickCallBack()
      }}
      className="workflow-com-list-item group flex cursor-pointer items-center justify-between"
    >
      <div className="flex items-center gap-2">
        <img src={item.icon} style={{ width: '28px', height: '28px', borderRadius: '6px' }} alt="" />
        <div className="flexCol com-list-item">
          <Tooltip title={item.name}>
            <div className="com-list-item-name domOverflowEllip max-w-[360px]">{item.name}</div>
          </Tooltip>
          <Tooltip title={item.description}>
            <div className="com-list-item-description domOverflowEllip max-w-[360px]">{item.description}</div>
          </Tooltip>
        </div>
      </div>
      <svg
        className="workflow-com-list-item-svg"
        onClick={event => {
          event.stopPropagation()
          console.log('delCallBack')
          delCallBack(item.id)
        }}
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M4 5V12C4 12.5523 4.44772 13 5 13H11C11.5523 13 12 12.5523 12 12V5"
          stroke="#7587A5"
          strokeLinecap="round"
        />
        <path d="M3 5H13" stroke="#7587A5" strokeLinecap="round" />
        <path d="M6 5V4C6 3.44772 6.44772 3 7 3H9C9.55228 3 10 3.44772 10 4V5" stroke="#7587A5" strokeLinecap="round" />
      </svg>
    </div>
  )
}

export default ListComponent
